<template>
  <div>
    <Header :config="config"></Header>
    <Navigation :config="config"></Navigation>
    <div class="banner">
      <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/0c9e74531c7544d9bee8147f4f042fe3.jpg" alt style="width: 100%;">
    </div>
    <div class="khal-title">
      <strong class="title">客户案例</strong>
    </div>
    <div class="khal-crumb">
      <div class="kc-center">
        <div class="kcc-list">
          <a v-for="(item,index) in crumbs" :key="index" :href="item.href ? item.href : 'javascript:void(0);'" class="kccl-a" :class="item.href ? '' : 'noafter'">{{ item.title }}</a>
        </div>
      </div>
    </div>
    <div class="khal-screen">
      <div class="ks-center">
        <div class="ksc-city">
          <div class="c-cover"></div>
          <div class="c-list">
            <a v-for="item in screenCityData" :key="item.id" :href="item.href" class="cl-a" :class="item.cityAliases==cityCodeAliases ? 'on' : ''">{{ item.cityName }}</a>
          </div>
        </div>
        <ul class="ksc-type">
          <li v-for="item in screenTypeData" :key="item.id" class="kt-list" :class="item.typeAliases==caseTypeAliases ? 'on' : ''">
            <a :href="item.href" class="ktl-a">{{ item.typeName }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="khal-list">
      <div class="kl-center">
        <div class="klc-left">
          <ul class="klc-ul">
            <li class="klcu-li" v-for="item in listData" :key="item.id">
              <a target="_blank" :href="item.href" class="cover" :title="item.title">
                <el-image :src="item.images" :alt="item.title" lazy></el-image>
              </a>
              <a target="_blank" :href="item.href" class="title" :title="item.title">{{ item.title }}</a>
            </li>
          </ul>
          <div class="null" v-show="listData.length < 1">
            <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221115/1d9127c255e443339c89aa67c36acc2a.png" alt="暂无数据" class="n-cover">
            <p class="n-text">暂无数据</p>
          </div>
          <div class="page" v-if="listData.length > 0">
            <div class="p-list">
              <a :href="pageData.prev.on ? pageData.prev.href : 'javascript:void(0);'" class="pl-a" :class="pageData.prev.on ? '' : 'disabled'">&lt;&lt;</a>
              <a v-for="(item,index) in pageData.list" :key="index" :href="item.num==pageNum ? 'javascript:void(0);' : item.href" class="pl-a" :class="item.num==pageNum ? 'on' : ''">{{ item.num }}</a>
              <a :href="pageData.next.on ? pageData.next.href : 'javascript:void(0);'" class="pl-a" :class="pageData.next.on?'':'disabled'">&gt;&gt;</a>
            </div>
          </div>
        </div>
        <div class="klc-right">
          <div class="relevant-news">
            <div class="rn-title">
              <i class="icon"></i>
              <p class="text">相关资讯</p>
            </div>
            <ul class="rn-ul">
              <li class="rnu-li" v-for="item in relevantNewsData" :key="item.id">
                <a target="_blank" class="rnul-a" :href="item.href" :title="item.title">{{ item.title }}</a>
              </li>
            </ul>
          </div>
          <div class="r-label">
            <a v-for="item in newsTypeData" :key="item.id" target="_blank" :href="item.href" class="rl-a" :title="item.typeName">{{ item.typeName }}</a>
          </div>
          <div class="r-contact">
            <div class="rc-title">
              <i class="icon"></i>
              <p class="text">联系方式</p>
            </div>
            <div class="rc-phone">电话：191-0267-1826</div>
            <div class="rc-address">地址：上海市奉贤区金海公路</div>
          </div>
        </div>
      </div>
    </div>
    <Footer :config="config"></Footer>
  </div>
</template>

<script>
import u from '@/plugins/public'
export default {
  async asyncData(ctx) {
    // 设置导航选中
    ctx.config.navData[5].on = true

    let _cityName = ''
    // 获取路径参数
    var pageNum = 1
    var cityCodeAliases = ''
    var caseTypeAliases = ''
    var _cityCode = ''
    var _caseType = ''

    // 面包屑
    var crumbs = [{
      title: '纺扬科技',
      href: `${ctx.config.domain}/`
    }, {
      title: '客户案例',
      href: ''
    }]

    // 筛选城市数据
    var screenCityData = []
    let getCity = await u.http({
      url: ctx.store.state.queryCaseCityList,
      params: {
        pageSize: 100
      }
    })
    if (getCity.code == 200) {
      screenCityData = getCity.data.list
      screenCityData.forEach(item => {
        if (item.cityAliases == _cityCode) {
          cityCodeAliases = item.cityAliases
          crumbs[1].href = `${ctx.config.domain}/khal/`
          crumbs.push({
            title: item.cityName,
            href: ''
          })
          _cityName = item.cityName
        }
        item.href = `${ctx.config.domain}/khal/${item.cityAliases}/`
      })
    }

    // 筛选类型数据
    var screenTypeData = []
    let getType = await u.http({
      url: ctx.store.state.queryCaseTypeList,
      params: {
        pageNum: 1,
        pageSize: 6
      }
    })
    if (getType.code == 200) {
      screenTypeData = getType.data.list
      screenTypeData.forEach(item => {
        if (item.typeAliases == _caseType) {
          caseTypeAliases = item.typeAliases
          crumbs[1].href = `${ctx.config.domain}/khal/`
          crumbs.push({
            title: item.typeName,
            href: ''
          })
          if (cityCodeAliases) {
            crumbs[2].href = `${ctx.config.domain}/khal/${cityCodeAliases}/`
            crumbs.push({
              title: item.typeName,
              href: ''
            })
          }
        }
        item.href = `${ctx.config.domain}/khal/${item.typeAliases}/`
        if (cityCodeAliases) {
          item.href = `${ctx.config.domain}/khal/${cityCodeAliases}-${item.typeAliases}/`
        }
      })
    }

    // 验证城市，类型在指定条件下是否存在
    if (_cityCode && !cityCodeAliases && pageNum < 1) {
      ctx.status = 404
    }
    if (_caseType && !caseTypeAliases && pageNum < 1) {
      ctx.status = 404
    }

    // 获取列表
    var listData = []
    let getList = await u.http({
      url: ctx.store.state.queryCaseList,
      params: {
        pageNum,
        pageSize: 12,
        caseTypeAliases,
        cityCodeAliases
      }
    })
    if (getList.code == 200) {
      listData = getList.data.list
      // 上一页
      let pagePrev = getList.data.prePage
      let hrefPrev = `${ctx.config.domain}/khal/p${pagePrev}/`
      if (cityCodeAliases) {
        hrefPrev = `${ctx.config.domain}/khal/${cityCodeAliases}-p${pagePrev}/`
      }
      if (caseTypeAliases) {
        hrefPrev = `${ctx.config.domain}/khal/${caseTypeAliases}-p${pagePrev}/`
      }
      if (cityCodeAliases && caseTypeAliases) {
        hrefPrev = `${ctx.config.domain}/khal/${cityCodeAliases}-${caseTypeAliases}-p${pagePrev}/`
      }
      let pageDataPrev = {
        on: pagePrev < 1 ? false : true,
        href: hrefPrev
      }
      // 下一页
      let pageNext = getList.data.nextPage
      let hrefNext = `${ctx.config.domain}/khal/p${pageNext}/`
      if (cityCodeAliases) {
        hrefNext = `${ctx.config.domain}/khal/${cityCodeAliases}-p${pageNext}/`
      }
      if (caseTypeAliases) {
        hrefNext = `${ctx.config.domain}/khal/${caseTypeAliases}-p${pageNext}/`
      }
      if (cityCodeAliases && caseTypeAliases) {
        hrefNext = `${ctx.config.domain}/khal/${cityCodeAliases}-${caseTypeAliases}-p${pageNext}/`
      }
      let pageDataNext = {
        on: pageNext < 1 ? false : true,
        href: hrefNext
      }
      // 重组分页路径
      let pageDataList = []
      getList.data.navigatepageNums.forEach(item => {
        let href = `${ctx.config.domain}/khal/p${item}/`
        if (cityCodeAliases) {
          href = `${ctx.config.domain}/khal/${cityCodeAliases}-p${item}/`
        }
        if (caseTypeAliases) {
          href = `${ctx.config.domain}/khal/${caseTypeAliases}-p${item}/`
        }
        if (cityCodeAliases && caseTypeAliases) {
          href = `${ctx.config.domain}/khal/${cityCodeAliases}-${caseTypeAliases}-p${item}/`
        }
        pageDataList.push({
          num: item,
          href
        })
      })
      var pageData = {
        prev: pageDataPrev,
        next: pageDataNext,
        list: pageDataList
      }

      listData.forEach(item => {
        item.href = `${ctx.config.domain}/khalxq/${item.id}.html`
      })
    }

    // 获取相关资讯
    var relevantNewsData = []
    let getRelevantNewsList = await u.http({
      url: ctx.store.state.queryNewsList,
      params: {
        pageNum: 1,
        pageSize: 10,
        caseTypeAliases
      }
    })
    if (getRelevantNewsList.code == 200) {
      relevantNewsData = getRelevantNewsList.data.list
      relevantNewsData.forEach(item => {
        item.href = `${ctx.config.domain}/xwzxxq/${item.id}.html`
      })
    }

    // 获取新闻类型
    var newsTypeData = []
    let getNewsType = await u.http({
      url: ctx.store.state.queryNewsTypeList,
      params: {
        pageNum: 1,
        pageSize: 6
      }
    })
    if (getNewsType.code == 200) {
      newsTypeData = getNewsType.data.list
      newsTypeData.forEach(item => {
        item.href = `${ctx.config.domain}/xwzx/${item.typeAliases}/`
      })
    }
    
    return {
      config: ctx.config,
      crumbs,
      screenCityData,
      screenTypeData,
      cityCodeAliases,
      caseTypeAliases,
      pageNum,
      listData,
      pageData,
      relevantNewsData,
      newsTypeData
    }
  },
  head() {
    return {
      title: '网站建设及seo优化部分案例-竞价托管-巨量引擎抖音代运营-纺扬网站建设',
      meta: [
        { hid: 'description', name: 'description', content: '网站建设及seo关键词优化，竞价托管，巨量引擎抖音代运营认准纺扬网站建设，多年来致力于为客户创造商业价值，您值得信赖。' },
        { hid: 'keywords', name: 'keywords', content: '网站建设,seo优化,竞价托管,抖音代运营,巨量引擎代运营,纺扬网站建设' }
      ]
    }
  }
}
</script>

<style>
  body {
    background-color: #f5f5f5;
  }
</style>